<template>
	<view style="width: 100%;height: auto;background: white;">
		<!-- 		<view id="home" style="justify-content: space-between;padding: 20rpx 30rpx;"
			class="home acea-row row-center-wrapper iconfont icon-xiangzuo h5_back" @tap="returns">
		</view> -->
		<view style="width: 100%;height: 20rpx;background: #fff;">

		</view>
		<view class="singleShow">
			<view class="imgstyle">
				<uni-row class="demo-uni-row" style="width: 100%;" :gutter="10">
					<uni-col :span="24" v-for="(item, index) in listData" :index="index" :key="index"
						style="margin-bottom: 30rpx;">
						<view @click="toDetail(item)">
							<view>
								<image :src="item.img_url" style="width: 100%;border-radius: 16rpx;" mode="widthFix">
								</image>
							</view>
							<view
								style="font-size: 28rpx;background: #fff;height: auto;border-bottom-left-radius: 16rpx;border-bottom-right-radius: 16rpx;padding: 10rpx;">
								<view style="font-weight: 600;">
									{{item.message.split('丨')[0]}}
									<span style="font-weight: normal;">
										丨{{item.message.split('丨')[1]}}
									</span>
								</view>
							</view>
						</view>
					</uni-col>
				</uni-row>
			</view>
		</view>
		<view class="des_detail" v-if="isBlackApp()">
			<open-app :shareUrl="shareUrl"></open-app>
		</view>
	</view>
</template>
<script>
	const app = getApp();
	const comUrl = "https://pic.mae.vip/%E4%BA%BA%E5%83%8F%E5%AE%9E%E6%88%98%E7%8F%AD%E7%B4%A0%E6%9D%90/";
	import openApp from './components/openApp.vue';
	import {
		getStoryList
	} from '@/api/case.js';

	import {
		addClickRecord,
	} from '@/api/home.js';
	import {
		loginMobile,
	} from "@/api/user";
	import {
		mapGetters
	} from "vuex";
	import animationType from '@/utils/animationType.js'
	import {
		ref
	} from 'process';

	export default {
		components: {
			openApp
		},
		data() {
			return {
				shareUrl: 'https://www.mayimae.com/qz/pages/usercase/story',
				moreicon: '../../static/images/usercase/morearrow.png',
				locationicon: '../../static/images/usercase/dingwei.png',
				img: 'https://pic.mae.vip//crmebimage/public/product/2025/09/06/ea5d9b3d1e934843b2ccde824c634fa9bprsuegg1x.jpg',
				userId: '-1',
				token: '-1',
				phone: '13012562102',
				platform: uni.getSystemInfoSync().platform, //手机类型
				page: 1,
				limit: 10,
				listData: [],
				hasMore: true,
			}
		},
		created() {
			let that = this;
		},
		mounted: function() {
			let that = this;

		},
		onPageScroll(res) { //、、、、、
			let that = this;
		},
		onReachBottom() {
			let that = this;
		},
		onLoad(options) {
			let that = this;
			that.token = options.token;
			that.userId = options.userId;
			that.getData();
			that.loginH5();

			// 通过检查window.android和window.webkit属性来判断是否是移动端
			if (window.webkit) {
				if (that.platform == 'ios') {
					window.webkit.messageHandlers.goShare.postMessage({
						'page': '28',
						'shareurl': that.shareUrl
					});
				}
			}
			if (that.platform == 'android') {
				if (!that.isBlackApp()) {
					window.location.href = 'goShare&page=' + '28' + '&shareurl=' + that.shareUrl;
				}
			}
			if (window.webkit) {
				if (that.platform == 'ios') {
					window.webkit.messageHandlers.navTitle.postMessage({
						'name': '学员故事'
					});
				}
			}
			if (that.platform == 'android') {
				window.location.href = 'navTitle&name=' + '学员故事';
			}
		},
		onShow() {
			let that = this;
			// 通过检查window.android和window.webkit属性来判断是否是移动端
			if (window.webkit) {
				if (that.platform == 'ios') {
					window.webkit.messageHandlers.goShare.postMessage({
						'page': '28',
						'shareurl': that.shareUrl
					});
				}
			}
			if (that.platform == 'android') {
				if (!that.isBlackApp()) {
					window.location.href = 'goShare&page=' + '28' + '&shareurl=' + that.shareUrl;
				}
			}
		},
		beforeDestroy() {
			uni.$off('pageScroll'); // 避免内存泄漏
		},
		methods: {
			loginH5() {
				let that = this;
				loginMobile({
						phone: that.phone,
						captcha: '000000',
						spread_spid: 10001
					})
					.then(res => {
						let data = res.data;
						let newTime = Math.round(new Date() / 1000);
						that.$store.commit("LOGIN", {
							'token': res.data.token
						});
						that.$store.commit("SETUID", res.data.uid);

					})
					.catch(res => {
						that.$util.Tips({
							title: res
						});
					});
			},
			isBlackApp() {
				var u = navigator.userAgent.toLowerCase();
				return /micromessenger/i.test(u) || u.indexOf("weibo") > -1 || u.indexOf("qq") > -1 || u.indexOf(
					'mqqbrowser') > -1;
			},
			returns() {
				uni.navigateBack();
			},
			toDetail(p) {
				console.log('----!!!  ')
				let that = this;
				// uni.navigateTo({
				// 	animationType: animationType.type,
				// 	animationDuration: animationType.duration,
				// 	url: '/pages/usercase/storydetail?userId=' + that.userId + '&token=' + that.token +
				// 		'&storylink=' + p.jump_url,
				// })
				window.location.href = decodeURIComponent(p.jump_url)
			},
			getData() {
				let that = this;
				let p = {};
				p.userId = that.userId;
				p.token = that.token;
				p.page = that.page;
				p.limit = that.limit;
				getStoryList(p).then(res => {
					if (res.code == 0) {
						let arr = res.data;
						if (arr.length < that.limit) {
							that.hasMore = false;
						}
						that.$nextTick(() => {
							if (that.page == 1) {
								that.listData = [];
							}
							arr.forEach((item, index) => {
								that.listData.push(item)
							});
						})
					}
				})
			},
			jqueryUrl(url) {
				let arr = url.split('?');
				let params = arr[1].split('&');
				let obj = {};
				for (let i = 0; i < params.length; i++) {
					let param = params[i].split('=');
					obj[param[0]] = param[1];
				}
				return obj;
			},
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		height: 100%;
		width: 100%;
		background: white !important;
	}

	.des_detail {
		/* 必须设置position: relative;不然会位置飘出父层 */
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1001;
		//margin-top: -1500px;
		width: 100%;
		height: 100vh;
		//background: rgba(95, 157, 228, 0.5);
		background: transparent;
	}

	.userview {
		height: 130rpx;
		width: 100%;
		background: #fff;
		border-bottom-left-radius: 16rpx;
		border-bottom-right-radius: 16rpx;
		margin-top: -10rpx;
		display: grid;

		.username {
			display: flex;
			align-items: center;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx;
			width: calc(100% - 40rpx);
			color: #333333;
		}

		image {
			width: 20rpx;
			height: 20rpx;
		}

		.location {
			font-size: 20rpx;
			display: flex;
			align-items: center;
			color: #666666;
		}

		.banji {
			padding-left: 20rpx;
		}
	}

	.videostyle {
		width: 100%;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		height: 200rpx;
		margin-top: 10rpx;
	}

	.singleShow {
		margin: 0 10rpx 10rpx 10rpx;
		width: calc(100% - 20rpx);
		background: #fff;
		border-radius: 10rpx;
		height: auto;
		padding-bottom: 20rpx;

		.titleView {
			display: flex;
			align-items: center;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx;
			width: calc(100% - 40rpx);
			padding-top: 20rpx;
		}

		.subtitle {
			font-size: 30rpx;
			font-weight: 600;
		}

		.lookall {
			font-size: 24rpx;
			line-height: 24rpx;
			display: flex;
			align-items: center;
			color: #ea5550;
		}

		image {
			width: 30rpx;
			height: 30rpx;
		}

		.imgstyle {
			width: calc(100% - 20rpx);
			margin: 0rpx 10rpx;
		}
	}



	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}


	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.bottom {
		height: 100%;
		height: 100rpx;
		background: #f5f5f5;
		display: flex;
		justify-content: center;

		button {
			background: #fff;
			width: 200rpx;
			height: 60rpx;
			border-radius: 30rpx;
			font-size: 24rpx;
			line-height: 60rpx;
			margin-top: 20rpx;
		}
	}
</style>